<template>
	<view class="info" v-if="show">
		<view class="info_bg" @click="close"></view>
		<view class="info_body">
			<view class="info_body_close" @click="close">
				<rui-icons icon="close" color="#888"></rui-icons>
			</view>
			<view class="info_body_user">
				<image :src="user.avatar || '/static/images/avatar.jpg'" class="info_body_user_image" mode=""></image>
				<view class="info_body_user_info">
					<view class="info_body_user_info_nickname">
						{{user.nickname || ''}}
					</view>
					<view class="info_body_user_info_device">
						{{count}}个智能设备
					</view>
				</view>
			</view>
			<view class="info_body_desc">
				欢迎使用SMIHE产品，如遇到问题请联系我们客服，客服电话17723303755。
			</view>

			<rui-button text="退出登录" @click="change"></rui-button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	let user = ref({})
	let show = ref(false)
	let count = ref(0)


	const open = (u, c) => {
		console.log(222, u,c)
		show.value = true;
		user.value = u
		count.value = c
	}

	const close = () => {
		show.value = false;
	}

	const emits = defineEmits(['change'])
	const change = () => {
		emits('change')
	}
	defineExpose({
		open,
		close
	})
</script>

<style lang="scss" scoped>
	@keyframes up {
		from {
			transform: translate3d(0, 100%, 0);
			opacity: .3
		}

		to {
			transform: translate3d(0, 0, 0);
			opacity: 1
		}
	}

	.info {

		&_bg {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, .2);
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;

		}

		&_body {
			background: #fff;
			position: fixed;
			bottom: 0;
			width: calc(100% - 60rpx);
			z-index: 9999;
			box-shadow: 0 0 20rpx rgba(0, 0, 0, .05);
			overflow: hidden;
			padding-bottom: 30rpx;
			height: auto;
			animation: up .5s both;
			padding: 40rpx 30rpx;
			min-height: 200rpx;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;

			&_desc {
				font-size: 28rpx;
				border: 1rpx solid #e5e6e7;
				background: #f7f8f9;
				padding: 20rpx;
				border-radius: 10rpx;
				margin: 40rpx 20rpx 60rpx;
			}

			&_user {
				display: flex;
				align-items: center;

				&_info {
					&_nickname {
						font-size: 40rpx;
					}

					&_device {
						font-size: 28rpx;
						color: #999;
					}
				}

				&_image {
					width: 130rpx;
					height: 130rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}
			}


			&_close {
				background: #eee;
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				text-align: center;
				line-height: 60rpx;
				position: absolute;
				top: 30rpx;
				right: 30rpx;
			}
		}
	}
</style>